import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import { useMaterialStore } from '@/stores/useMaterial'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/preview/:id',
      name: 'preview',
      component: () => import('@/views/Preview.vue'),
    },
    {
      path: '/unocss',
      name: 'unocss',
      component: () => import('@/views/Unocss.vue'),
    },
    {
      path: '/drag',
      name: 'drag',
      component: () => import('@/views/Drag.vue'),
    },
    {
      path: '/materials',
      name: 'materials',
      component: () => import('@/views/MaterialsView/index.vue'),
      redirect: '/select-group',
      children: [
        {
          path: '/select-group',
          name: 'select-group',
          component: () => import('@/views/MaterialsView/page/SelectGroupView.vue'),
          redirect: '/single-select',
          children: [
            {
              path: '/single-select',
              name: 'single-select',
              component: () => import('@/components/Survey/Materials/SelectComs/SingleSelect.vue'),
            },
            {
              path: '/mu-select',
              name: 'mu-select',
              component: () => import('@/components/Survey/Materials/SelectComs/MuSelect.vue'),
            },
            {
              path: '/option-select',
              name: 'option-select',
              component: () => import('@/components/Survey/Materials/SelectComs/OptionSelect.vue'),
            },
            {
              path: '/single-pic-select',
              name: 'single-pic-select',
              component: () =>
                import('@/components/Survey/Materials/SelectComs/SinglePicSelect.vue'),
            },
            {
              path: '/mu-pic-select',
              name: 'mu-pic-select',
              component: () => import('@/components/Survey/Materials/SelectComs/MuPicSelect.vue'),
            },
          ],
        },
        {
          path: '/input-group',
          name: 'input-group',
          component: () => import('@/views/MaterialsView/page/InputGroupView.vue'),
        },
        {
          path: '/contact-group',
          name: 'contact-group',
          component: () => import('@/views/MaterialsView/page/ContractGroupView.vue'),
        },
        {
          path: '/note-group',
          name: 'note-group',
          component: () => import('@/views/MaterialsView/page/NoteGroupView.vue'),
          redirect: '/text-node',
          children: [
            {
              path: '/text-node',
              name: 'text-node',
              component: () => import('@/components/Survey/Materials/NoteComs/TextNode.vue'),
            },
          ],
        },
        {
          path: '/advanced-group',
          name: 'advanced-group',
          component: () => import('@/views/MaterialsView/page/AdvanceGroupView.vue'),
        },
        {
          path: '/personal-info-group',
          name: 'personal-info-group',
          component: () => import('@/views/MaterialsView/page/PersonGroupView.vue'),
          redirect: '/person-info-gender',
          children: [
            {
              path: '/person-info-gender',
              name: 'person-info-gender',
              component: () => import('@/components/Survey/Materials/SelectComs/SingleSelect.vue'),
            },
            {
              path: '/person-info-edu',
              name: 'person-info-edu',
              component: () => import('@/components/Survey/Materials/SelectComs/SingleSelect.vue'),
            },
          ],
        },
      ],
    },
    {
      path: '/editor/:id?', //id可选，代表编辑或新建
      name: 'editor',
      component: () => import('@/views/EditorView/index.vue'),
      // redirect: 'survey-type',
      children: [
        {
          path: 'survey-type',
          name: 'survey-type',
          component: () => import('@/views/EditorView/LeftSide/SurveyType.vue'),
        },
        {
          path: 'outline',
          name: 'outline',
          component: () => import('@/views/EditorView/LeftSide/Outline.vue'),
        },
      ],
    },
  ],
})

router.beforeEach((to, from, next) => {
  console.log(to)
  // const activeView = localStorage.getItem('activeView')
  const store = useMaterialStore()
  // 是否组件市场
  const isMaterials = to.matched?.find((i) => i.name === 'materials')
  if (isMaterials && to.name) {
    store.setCurrentMaterialCom(to.name as string)
  }
  next()
})

export default router
